<template>
  <div class="wrapper">
    <dx-header-bar title="二维码"></dx-header-bar>
    <div class="content">
      <div class="item" v-for="(item,index) in list" :key="index">
        <div class="title">{{item.name}}</div>
        <img alt="" :src="item.src" class="img">
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { DxHeaderBar } from '@/components';
import prodIOS from './prod-IOS.png';
import prodAndroid from './prod-Android.png';
import cusIOS from './cus-IOS.png';
import cusAndroid from './cus-Android.png';

export default {
  components: {
    DxHeaderBar
  },
  data() {
    return {
      list: [
        { name: '客户视图 Android版', src: cusAndroid },
        { name: '客户视图 IOS版', src: cusIOS },
        { name: '维护视图 Android版', src: prodAndroid },
        { name: '维护视图 IOS版', src: prodIOS }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="stylus" scoped>
  .wrapper
    overflow : hidden
    height : 100%

  .content
    padding-bottom : 120px
    height : 100%
    overflow : scroll

  .item
    text-align : center
    width : 100%
    .title
      padding 40px 0
      font-size : 28px
      line-height : 28px
    .img
      width : 400px
      height : 400px
</style>
